<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单列表</title>
    <link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
    <div class="order-header">
      <div class="order-user">
        <span>当前就诊人</span>
        <em>马俊敏</em>
        <i class="arrow-down"></i>
      </div>
      <div class="order-sub">
        <span>仅提供查询近180天订单</span>
      </div>
    </div>

    <div class="order-list">
      <a class="order-item" href="detail.html">
        <div class="order-item-header">
          <h4>北京大学国际医院</h4>
          <span>已取号</span>
          <i class="aui-iconfont aui-icon-right"></i>
        </div>

        <div class="order-item-body">
          <div class="order-item-row">
            <span>就诊科室</span>
            <p>胃肠外科</p>
          </div>
          <div class="order-item-row">
            <span>就诊时间</span>
            <p>2020年0512日 周二 上午</p>
          </div>
          <div class="order-item-row">
            <span>挂号证件</span>
            <p>居民身份证</p>
          </div>
        </div>
      </a>

      <a class="order-item" href="detail.html">
        <div class="order-item-header">
          <h4>北京大学国际医院</h4>
          <span>已取号</span>
          <i class="aui-iconfont aui-icon-right"></i>
        </div>

        <div class="order-item-body">
          <div class="order-item-row">
            <span>就诊科室</span>
            <p>胃肠外科</p>
          </div>
          <div class="order-item-row">
            <span>就诊时间</span>
            <p>2020年0512日 周二 上午</p>
          </div>
          <div class="order-item-row">
            <span>挂号证件</span>
            <p>居民身份证</p>
          </div>
        </div>
      </a>
    </div>


    <div class="order-layer" style="display:none;">
      <div class="order-layer-title">
        <h4>选择就诊人</h4>
        <i class="aui-iconfont aui-icon-close order-layer-close"></i>
      </div>
      <div class="order-layer-body">
        <div class="order-layer-user">
          <div class="order-layer-info">
            <h4>张三</h4>
            <p>54646*****2545857</p>
          </div>
          <i class="aui-iconfont aui-icon-right"></i>
        </div>

        <div class="order-layer-user">
          <div class="order-layer-info">
            <h4>张三</h4>
            <p>54646*****2545857</p>
          </div>
          <i class="aui-iconfont aui-icon-right"></i>
        </div>
      </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
$('.order-user').click(function () {
  var name = $(this).find('i').attr('class');
  if(name=='arrow-down'){
    $(this).find('i').removeClass('arrow-down');
    $(this).find('i').addClass('arrow-up');

    layer.open({
      type: 1,
      anim: 2,
      title: false,
      closeBtn: false,
      offset: 'b',
      area: ['100%','330px'],
      shadeClose: true,
      content: $('.order-layer'),
      end: function(index, layero){
        $('.order-user').find('i').addClass('arrow-down');
        $('.order-user').find('i').removeClass('arrow-up');
      }
    });
  }
  else if(name=='arrow-up'){
    $(this).find('i').addClass('arrow-down');
    $(this).find('i').removeClass('arrow-up');
  }
})

$('.order-layer-close').click(function functionName() {
  layer.closeAll();
})
</script>
</html>
